<template>
  <div class="related-business-list">
    <div
        v-for="(item, index) in options"
        v-if="data[item.type].length > 0"
        :key="index"
        class="list-item">
      <div class="left">
        <span :class="item.icon" class="wk icon"/>
        <span>相关{{ item.label }}：</span>
      </div>
      <div class="content">
        <div
            v-for="(child, childIndex) in data[item.type]"
            :key="childIndex"
            class="content-item"
            @click="handlerToDetail(item.type, childIndex)">
          {{ child[item.key] || child.name }}
        </div>
      </div>
    </div>

    <!--<c-r-m-all-detail
      :visible.sync="showRelatedDetail"
      :crm-type="relatedCRMType"
      :listener-ids="['workbench-main-container']"
      :no-listener-ids="['journal-list-box']"
      :id="relatedID"
      class="d-view"/>-->
  </div>
</template>

<script setup>
/**
 * 相关信息列表
 * @props data {Object}
 */
import CRMAllDetail from '/src/views/crm/componentsNew/SzCrud/CRMAllDetail.vue'
import {ref} from "vue";

defineOptions({
  name: 'RelatedBusinessList',
})

const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})

const emits = defineEmits(['select'])

const options = ref({
  customer: {
    label: '客户',
    type: 'customer',
    key: 'customerName',
    icon: 'wk-customer'
  },
  contacts: {
    label: '联系人',
    type: 'contacts',
    key: 'contactsName',
    icon: 'wk-contacts'
  },
  business: {
    label: '商机',
    type: 'business',
    key: 'businessName',
    icon: 'wk-business'
  },
  contract: {
    label: '合同',
    type: 'contract',
    key: 'name',
    icon: 'wk-contract'
  }
})

/**
 * 详情
 * @param type
 * @param index
 */
function handlerToDetail(type, index) {
  emits('select', type, props.data[type][index])
}


</script>

<style scoped lang="scss">
.related-business-list {
  width: 100%;

  .list-item {
    font-size: 12px;
    padding: 3px 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    .left {
      color: #666;

      .icon {
        font-size: 14px;
      }
    }

    .content {
      .content-item {
        line-height: 1.5;
        color: $xr-color-primary;
        margin-bottom: 3px;
        cursor: pointer;

        &:hover {
          text-decoration: underline;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style>
